<template>
  <div>
    <div class="quTitle p-y-10 flex justify-between items-center" :class="{'no-touch': isExam}">
      <div style="width: 70%;">
        <el-tag
          effect="plain"
          size="small"
        >{{currentQu.objTag ? currentQu.objTag : currentQu.subTag}}</el-tag>
        {{ curIdx+'. ' }}{{ currentQu.objContent ? currentQu.objContent : currentQu.subContent}}
      </div>
      <div class="flex items-center">
        <div class="flex items-center">
          <span>难度：</span>
          <el-rate v-model="grand" disabled />
        </div>
        <Enclosure :currentQu="currentQu" />
      </div>
    </div>

    <el-radio-group
      @change="$_radioChangeHandler"
      v-model="answer[curIdx-1].quAnswer"
      v-if="currentQu.objType == 1"
    >
      <el-radio label="1">A：{{ currentQu.objOne }}</el-radio>
      <el-radio label="2">B：{{ currentQu.objTwo }}</el-radio>
      <el-radio label="3">C：{{ currentQu.objThree }}</el-radio>
      <el-radio label="4">D：{{ currentQu.objFour }}</el-radio>
    </el-radio-group>

    <el-radio-group
      @change="$_radioChangeHandler"
      v-model="answer[curIdx-1].quAnswer"
      v-if="currentQu.objType == 2"
    >
      <el-radio label="1">{{ currentQu.objOne }}</el-radio>
      <el-radio label="2">{{ currentQu.objTwo }}</el-radio>
    </el-radio-group>

    <el-checkbox-group
      @change="$_radioChangeHandler();answer[curIdx-1].quAnswer=answer[curIdx-1].uanswers.join('$');"
      v-model="answer[curIdx-1].uanswers"
      v-if="currentQu.objType == 3"
    >
      <el-checkbox label="1">A：{{ currentQu.objOne }}</el-checkbox>
      <el-checkbox label="2">B：{{ currentQu.objTwo }}</el-checkbox>
      <el-checkbox label="3">C：{{ currentQu.objThree }}</el-checkbox>
      <el-checkbox label="4">D：{{ currentQu.objFour }}</el-checkbox>
    </el-checkbox-group>

    <div v-if="currentQu.subType == 4" class="flex items-center">
      <span>答:</span>
      <el-input
        class="border-bottom"
        @change="inputChange"
        auto-complete="off"
        placeholder="请输入"
        v-model="answer[curIdx-1].quAnswer"
        clearable
      />
    </div>

    <div v-if="currentQu.subType == 5" style="border: 1px solid #ccc;">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editor"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <Editor
        style="height: 300px; overflow-y: hidden;"
        v-model="answer[curIdx-1].subanswer"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="onCreated"
        @onBlur="onEditorBlur"
        @customPaste="customPaste"
      />
    </div>
  </div>
</template>

<script>
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { debounce } from "@/utils";
import Enclosure from "./enclosure.vue";

export default {
  name: "question",
  props: {
    subject: {
      type: Object,
      default: () => ({})
    },
    currentQu: {
      type: Object,
      default: () => ({})
    },
    answer: {
      type: Array,
      default: () => []
    },
    curIdx: Number,
    isExam: Boolean,
    isMultUse: Boolean
  },
  components: { Editor, Toolbar, Enclosure },
  data() {
    return {
      // 文本编辑器
      editor: null,
      toolbarConfig: {
        excludeKeys: [
          "todo",
          "insertVideo",
          "uploadVideo",
          "fullScreen",
          "emotion",
          "bgColor",
          "codeBlock",
          "insertImage",
          "uploadImage",
          "deleteImage",
          "editImage",
          "viewImageLink",
          "imageWidth30",
          "imageWidth50",
          "imageWidth100"
        ]
      },
      editorConfig: { placeholder: "请输入内容..." },
      mode: "simple", // 'default' or 'simple'
      $_radioChangeHandler: null
    };
  },
  computed: {
    grand: {
      get() {
        return this.currentQu.objGrand
          ? this.currentQu.objGrand
          : this.currentQu.subGrand;
      }
    }
  },
  created() {
    this.$_radioChangeHandler = debounce(
      () => {
        if (this.isMultUse) {
          this.subject[this.currentQu.objType].subs.find(
            x => x.order == this.curIdx
          ).completed = true;
        }
        this.answer[this.curIdx - 1].completed = true;
        this.$emit("change", this.answer[this.curIdx - 1]);
      },
      500,
      false
    );
  },
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁编辑器
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
    },
    customPaste(editor, event, callback) {
      // 自定义插入内容
      if (this.isExam) {
        this.$message("考试不允许粘贴");
        // 返回 false ，阻止默认粘贴行为
        event.preventDefault();
        callback(false); // 返回值（注意，vue 事件的返回值，不能用 return）
      } else {
        // 返回 true ，继续默认的粘贴行为
        callback(true);
      }
    },
    onEditorBlur() {
      const editor = this.editor;
      if (editor == null) return;
      let v = editor.getText();
      this.answer[this.curIdx - 1].quAnswer = v;
      this.inputChange(v);
    },
    inputChange(v) {
      if (this.isMultUse)
        this.subject[this.currentQu.subType].subs.find(
          x => x.order == this.curIdx
        ).completed = v != "";
      this.answer[this.curIdx - 1].completed = v != "";
      this.$emit("change", this.answer[this.curIdx - 1]);
    }
  }
};
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
<style scoped>
.el-radio-group,
.el-checkbox-group {
  display: flex;
  flex-direction: column;
}
.el-radio,
.el-checkbox {
  margin-top: 20px;
}
.el-input {
  width: 30%;
}
.el-input :deep(.el-input__inner) {
  border: none;
}
:deep(.el-rate) {
  height: auto;
  line-height: 0;
}
</style>